iT邦幫忙

2024 iThome 鐵人賽

DAY 26
0
生成式 AI

AI的雲上漫遊系列 第 26

Day26 前端部署至Cloud Run

  • 分享至 

  • xImage
  •  

接下來我們就要部署前端,一樣建立Docker file

FROM node:18-alpine as build

WORKDIR /app

COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:stable-alpine

RUN rm /etc/nginx/conf.d/default.conf

COPY nginx.conf /etc/nginx/conf.d/default.conf

COPY --from=build /app/dist /usr/share/nginx/html

EXPOSE 80

RUN nginx -t

CMD ["nginx", "-g", "daemon off;"]

裡面有使用到 nginx,所以我們需要導流至後端的url需要配置一下我們的 nginx的conf!

nginx.conf

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass https://xxxx.run.app/api/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host xxxx.run.app;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

ps:xxxx為後端的url!

接著跟著後端一樣的設定方式,但前端的好處就是不用設定太多奇怪的東西nginx反向代理處理好以及docker file寫好,本地端測試docker build及docker run沒問題通常整體來說都會沒問題!

https://ithelp.ithome.com.tw/upload/images/20240927/20106094K8D0igh5L8.png

url連接畫面

https://ithelp.ithome.com.tw/upload/images/20240927/20106094fON4CO39Bq.png

是不是簡單又快速呢!


上一篇
Day25 本地前端串接Cloud後端
下一篇
Day27 完成專屬的個人AI網站
系列文
AI的雲上漫遊30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言